<template>
    <div>
        <a-form layout="inline"
                :model="searchData"
                style="margin: 10px 0">
            <a-form-item>
                <a-input v-model:value="searchData.name" placeholder="权限名称"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="load">搜索</a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="default" @click="rest">重置</a-button>
            </a-form-item>
        </a-form>
        <a-button type="primary" style="margin-bottom: 10px" @click="openModal({})">新增</a-button>
        <a-table :dataSource="permissionList"
                 :columns="columns"
                 :pagination="false"
                 :row-key="record => record.id"
                 :indentSize="70"
                 @change="handlerChange"
                 bordered>
            <template v-slot:action="{text,record}">
                <a-button type="primary" @click="openModal(record)">编辑</a-button>
                <a-popconfirm
                        title="删除数据无法恢复，请确认是否删除？"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="okDelete(record.id)"
                >
                    <a-button type="danger">删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" title="新增或编辑" @ok="handleOk">
            <a-form v-model="permission"
                    :label-col="{ span: 8 }">
                <a-form-item label="父级权限" v-bind="validateInfos.parentId">
                    <a-select
                            ref="select"
                            v-model:value="permission.parentId"
                            placeholder="父级路径"
                            style="width: 120px">
                        <a-select-option :value="0" :key="0">父路径</a-select-option>
                        <a-select-option v-for="(item,index) in permissionList"
                                         :disabled="item.id == permission.id"
                                         :key="item.id"
                                         :value="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="权限名称" v-bind="validateInfos.name">
                    <a-input :disabled="permission.parentId == undefined" v-model:value="permission.name"></a-input>
                </a-form-item>
                <a-form-item label="路由路径">
                    <a-input :disabled="permission.parentId == undefined || permission.parentId == 0" v-model:value="permission.url"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message, Form} from 'ant-design-vue';

    export default {
        name: "personnel-permission",
        setup() {
            const columns = [
                // {
                //     title: 'ID',
                //     dataIndex: 'id',
                //     key: 'id',
                //     align: 'center',
                //     width: '20%'
                // },
                {
                    title: '权限名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center',
                    width: '20%'
                },
                {
                    title: '路由路径',
                    dataIndex: 'url',
                    key: 'url',
                    align: 'center',
                    width: '30%'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center',
                    width: '30%'
                }
            ]

            const useForm = Form.useForm
            const permission = ref({})
            const permissionList = ref()
            const searchData = ref({})
            const pagination = ref({
                current: 1,
                pageSize: 6,
            })

            const {validate, validateInfos, resetFields} = useForm(permission, {
                parentId: [{required: true, message: '请选择父级权限', trigger: ['submit','change']}],
                name: [{required: true, message: '不能为空', trigger: ['submit','change']}]
            })

            const visible = ref(false);

            const load = () => {
                axios.get('/permission/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        name: searchData.value.name,
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    permissionList.value = listToTree(rs.data.data)
                    pagination.value.total = rs.data.data.total
                })
            }

            const listToTree = list => {
                let rs = []
                list.forEach(val => {
                    if (val.parentId == 0) {
                        let children = []
                        list.forEach(value => {
                            if (value.parentId == val.id) {
                                children.push(value)
                            }
                        })
                        val.children = children
                        rs.push(val)
                    }
                })
                return rs.length == 0 ? list : rs
            }

            const rest = () => {
                searchData.value = {}
                load()
            }

            const handlerChange = (pageInfo) => {
                pagination.value = pageInfo
                load()
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                visible.value = true;
                permission.value = JSON.parse(JSON.stringify(obj))
                if (JSON.stringify(obj) == '{}') {
                    permission.value.name = ''
                    permission.value.parentId = undefined
                    resetFields()
                }
            }

            const handleOk = () => {
                validate().then(rs => {
                    // console.log("校验结果：", rs)
                    axios.post('/permission/saveOrUpdate', permission.value).then(rs => {
                        console.log("新增或修改结果：", rs)
                        if (rs.data.code == 200) {
                            visible.value = false
                            message.success("操作成功")
                            load()
                        } else {
                            message.error(rs.data.message)
                        }
                    })
                }).catch(e => {
                    console.log("失败结果：", e)
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/permission/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            onMounted(() => {
                load()
            })
            return {
                columns,
                pagination,
                handlerChange,
                searchData,
                load,
                rest,
                openModal,
                visible,
                handleOk,
                okDelete,
                permission,
                permissionList,
                validateInfos
            }
        }
    }
</script>

<style scoped>

</style>